<template>
    <!--此界面有我的订单点击返修按钮进入，请勿修改-->
    <div class="new-repair">
        <div class="nr-main">
            <!--<div class="nrm-common-one">
                <el-input
                        v-model="iptValOne"
                        class="nrmco-input"
                        placeholder="请输入内容"
                ></el-input>
                <div class="nrmco-btn">搜索</div>
            </div>-->
            <div class="nrm-common-two">
                <span></span>
                <span>订单信息</span>
            </div>
            <ul class="nrm-one">
                <li>
                    <p>
                        <span>订单编号</span>
                        <span>{{tableData.orderSn}}</span>
                    </p>
                    <p>
                        <span>订单类型</span>
                        <span>团体订单</span>
                    </p>
                </li>
                <li>
                    <p>
                        <span>订单状态</span>
                        <span>{{tableData.status}}</span>
                    </p>
                    <p></p>
                </li>
                <li>
                    <p>
                        <span>创建时间</span>
                        <span>{{tableData.createTime}}</span>
                    </p>
                </li>
            </ul>
            <div class="nrm-common-two">
                <span></span>
                <span>员工信息</span>
            </div>

            <div class="nrm-common-one" style="margin-top: 20px;">
                <el-input
                        v-model="iptValOne"
                        class="nrmco-input"
                        placeholder="请输入内容"
                ></el-input>
                <div class="nrmco-btn" @click="selectEmp">搜索</div>
                <div class="nrmco-btn">查看员工列表</div>
            </div>
            <div class="nrm-two">
                <el-table
                        :data="empData"
                        style="width: 100%"
                        :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
                >
                    <el-table-column
                            type="index"
                            label="序号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="customerName"
                            label="员工姓名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="customerCode"
                            label="员工编号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="departName"
                            label="部门名称"
                    >
                    </el-table-column>
                    <!--<el-table-column
                            fixed="right"
                            label="操作"
                    >
                        <template slot-scope="props">
                            <el-button
                                    type="text"
                                    size="small"
                                    :style="{color: '#D0AC04'}"
                            >立即添加
                            </el-button>
                        </template>
                    </el-table-column>-->
                </el-table>
            </div>

            <div class="nrm-common-two">
                <span></span>
                <span>返修参数</span>
            </div>
            <ul class="nrm-five">
                <!--产品列表-->
                <el-button v-for="(item,key) in productList"
                           :key="item.id"
                           type="primary"
                           @click="changeSize(item.id),productID = item.id"
                >{{item.productName}}
                </el-button>
            </ul>

            <!--这里展示的是每个产品的尺寸表-->
            <div class="nrm-six">
                <el-input v-for="(list,key) in sizeData"
                          :key="list.id"
                          v-model="list.bodysizeValue"
                          placeholder="请输入内容"
                          @blur="updateSize(list.bodysizeId,list.bodysizeValue)"
                          class="nrms-ipt">
                    <div slot="prefix" class="nrmsi-label">
                        {{list.sizeName}}
                    </div>
                    <div slot="suffix" class="nrmsi-right">
                        {{list.unit}}
                    </div>
                </el-input>
            </div>

            <div class="nrm-common-two">
                <span></span>
                <span>返修金额</span>
            </div>
            <div class="nrm-there">
                <p>返修金额</p>
                <p>{{tableData.orderMoney}}</p>
            </div>

            <div class="nrm-four">提交订单</div>
        </div>
    </div>
</template>

<script>
    import {getAction} from "../../api/manage";

    export default {
        created() {
            this.getData()
        },
        data() {
            return {
                autohor_token: localStorage.getItem("token"), //token
                url: {
                    list: "/Order/getTeamOrderDetail",
                    emps: "/Order/selectEmployees",
                    Product: "/Order/getProductList",
                    SizeList: "/Order/getSizeList",
                    updateSize: '/Order/updateProductSize',
                },
                iptValOne: "",
                current: 1,
                oneObj: {
                    input1: "",
                },
                tableData: '', // 订单基本信息
                empData: '', // 员工列表
                productList: '', // 产品列表
                sizeData: []
            };
        },
        methods: {
            // 获取团订的基本信息
            getData() {
                getAction(domain.publicUrl + this.url.list, {
                    'token': this.autohor_token,
                    'orderSn': this.$route.query.sn
                }).then(res => {
                    if (res.data.code == '0') {
                        this.tableData = res.data.data
                    }
                })
            },
            // 查询员工的方法
            selectEmp() {
                getAction(domain.publicUrl + this.url.emps, {
                    'token': this.autohor_token,
                    'codeOrName': this.iptValOne,
                    'customerId': this.tableData.customerId
                }).then(res => {
                    if (res.data.code == '0') {
                        this.empData = res.data.data
                        let departid = res.data.data[0].departId
                        this.getProductList(departid)
                    }
                })
            },
            // 查到员工之后，也就得到了部门,根据部门和订单编号获取产品列表
            getProductList(departid) {
                getAction(domain.publicUrl + this.url.Product, {
                    'token': this.autohor_token,
                    'departid': departid,
                    'orderSn': this.tableData.orderSn
                }).then(res => {
                    if (res.data.code == '0') {
                        this.productList = res.data.data
                    }
                })
            },
            changeSize(productId) {
                getAction(domain.publicUrl + this.url.SizeList, {
                    'token': this.autohor_token,
                    'productID': productId
                }).then(res => {
                    if (res.data.code == '0') {
                        this.sizeData = res.data.data
                    }
                })
            },
            // 更新产品尺寸
            updateSize(sizeID, sizeValue) {
                getAction(domain.publicUrl + this.url.updateSize, {
                    'token': this.autohor_token,
                    'productID': this.productID,
                    'sizeID': sizeID,
                    'sizeValue': sizeValue
                }).then(res => {
                    if (res.data.code == '0') {
                        // this.$message.success("修改成功！")
                        return
                    } else {
                        this.$message.error("修改失败！")
                    }
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .new-repair {
        box-sizing: border-box;
        padding: 30px 90px;

        .nrm-common-one {
            display: flex;
            align-items: center;

            .nrmco-input {
                width: 290px;
            }

            .nrmco-btn {
                box-sizing: border-box;
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #303030;
                border-radius: 3px;
                margin: 0 10px;
                font-size: 16px;
                font-weight: 500;
                color: #ffe56d;
                cursor: pointer;
            }
        }

        .nrm-common-two {
            display: flex;
            align-items: center;
            margin-top: 25px;

            span:nth-child(1) {
                width: 4px;
                height: 28px;
                background: #4a4a4a;
                margin-right: 15px;
            }

            span:nth-child(2) {
                font-size: 16px;
                font-weight: 600;
                color: #4e4e4e;
            }
        }

        .nr-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;

            .nrm-one {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;
                box-sizing: border-box;
                padding: 0 20px;

                li {
                    p {
                        margin-bottom: 20px;

                        span {
                            font-size: 16px;
                            color: #4e4e4e;
                        }

                        span:nth-child(1) {
                            margin-right: 20px;
                            font-weight: 200;
                        }

                        span:nth-child(2) {
                            font-weight: 500;
                        }
                    }
                }
            }

            .nrm-two {
                margin-top: 20px;
            }

            .nrm-there {
                display: flex;
                align-items: center;
                margin-top: 30px;

                p:nth-child(1) {
                    width: 90px;
                    height: 40px;
                    background: #f2f2f2;
                    font-size: 14px;
                    font-weight: 400;
                    color: #555555;
                    line-height: 40px;
                    text-align: center;
                    margin-right: 32px;
                }

                p:nth-child(2) {
                    font-size: 16px;
                    font-weight: bold;
                    color: #393939;
                }
            }

            .nrm-four {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #24c04f;
                border-radius: 3px;
                color: #fff;
                font-size: 14px;
                margin-top: 40px;
                cursor: pointer;
            }

            .nrm-five {
                display: flex;
                margin-top: 20px;

                li {
                    width: 90px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background: #ededed;
                    border-radius: 3px;
                    font-size: 14px;
                    color: #a1a1a1;
                    margin-right: 12px;
                    cursor: pointer;
                }

                .active {
                    background: #303030;
                    color: #ffe56d;
                }
            }

            .nrm-six {
                display: flex;
                flex-wrap: wrap;

                .nrms-ipt {
                    width: 230px;
                    box-sizing: border-box;
                    padding-left: 30px;
                    margin-top: 20px;
                    margin-right: 20px;
                }

                .nrmsi-label {
                    line-height: 40px;
                    width: 55px;
                    height: 40px;
                    background: #2d2d2d;
                    border-radius: 3px;
                    color: #ffec70;
                    position: relative;
                    left: -5px;
                }

                .nrmsi-right {
                    line-height: 40px;
                }
            }
        }
    }
</style>